{include file="common/header"}
<!-- 头部 -->
{include file="common/top" /} 
<!-- /头部 -->	
<div class="main-container container-fluid">
	<div class="page-container">
		<!-- Page Sidebar -->
        {include file="common/left" /} 
         <!-- Page Content -->
        <div class="page-content">
            <!-- Page Breadcrumb -->
            <div class="page-breadcrumbs">
                <ul class="breadcrumb">
                     <li>
                        <a href="#">系统</a>
                    </li>
                    <li>
                        <a href="{:url('lst')}">用户组管理</a>
                    </li>
                    <li class="active">添加用户组</li>
                </ul>
            </div>
            <!-- /Page Breadcrumb -->
            <!-- Page Body -->
            <div class="page-body">                   
                <div class="row">
                    <div class="col-lg-12 col-sm-12 col-xs-12">
                        <div class="widget">
                            <div class="widget-header bordered-bottom bordered-blue">
                                <span class="widget-caption">新增用户组</span>
                            </div>
                            <div class="widget-body">
                                <div id="horizontal-form">
                                    <form class="form-horizontal" role="form" action="" method="post">
                                       <div class="form-group">
                                            <label for="username" class="col-sm-2 control-label no-padding-right">用户组名称</label>
                                            <div class="col-sm-6">
                                                <input class="form-control"  placeholder="" name="title" required="" type="text">
                                            </div>
                                            <p class="help-block col-sm-4 red">* 必填</p>
                                        </div>
                                        <div class="form-group">
                                            <label for="username" class="col-sm-2 control-label no-padding-right">启用状态</label>
                                            <div class="col-sm-6">
                                            <p class="help-block col-sm-4 red">
                                                <label>
                                                    <input class="checkbox-slider colored-darkorange" name="status" value="1" checked="checked" type="checkbox">
                                                    <span class="text"></span>
                                                </label>
                                            </p>
                                            </div>
                                            <p class="help-block col-sm-4 red">* 必填</p>
                                        </div>
                                        <div class="form-group">
                                            <label for="username" class="col-sm-2 control-label no-padding-right"></label>
                                            <div class="col-sm-6">
                                               <table class="table table-hover">
                                                    <thead class="bordered-darkorange">
                                                        <tr>
                                                            <th>
                                                                配置权限
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody> 
                                                    {volist name="rule" id="vo"}                                                  
                                                        <tr>
                                                            <td>
                                                                <label> 
                                                                 <?php echo str_repeat('&nbsp;', $vo['level']*5);?>
                                                                    <input name="rules[]" value="{$vo.id}" dataid="id-{$vo.dataid}" class="inverted checkbox-parent {if condition="$vo['level'] neq 0"}checkbox-child {/if}" type="checkbox">
                                                                    <span {if condition="$vo['pid'] eq 0"}style="font-size: 14px;font-weight:bold;"{/if} class="text">{$vo['name']}</span>
                                                                </label>
                                                            </td>
                                                        </tr>
                                                    {/volist}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="submit" class="btn btn-default">保存信息</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Page Body -->
        </div>
    </div>  
</div>
{include file="common/foot"}
<script type="text/javascript">
/* 权限配置 */
$(function () {
    //动态选择框，上下级选中状态变化
    $('input.checkbox-parent').on('change', function () {
        var dataid = $(this).attr("dataid");
        $('input[dataid^=' + dataid + ']').prop('checked', $(this).is(':checked'));
    });
    $('input.checkbox-child').on('change', function () {
        var dataid = $(this).attr("dataid");
        dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        var parent = $('input[dataid=' + dataid + ']');
        if ($(this).is(':checked')) {
            parent.prop('checked', true);
            //循环到顶级
            while (dataid.lastIndexOf("-") != 2) {
                dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                parent = $('input[dataid=' + dataid + ']');
                parent.prop('checked', true);
            }
        } else {
            //父级
            if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                parent.prop('checked', false);
                //循环到顶级
                while (dataid.lastIndexOf("-") != 2) {
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                        parent.prop('checked', false);
                    }
                }
            }
        }
    });
});
    </script>
